"use client";

import { Layout, Menu, Button } from "antd";
import {
  UserOutlined,
  FileTextOutlined,
  AppstoreOutlined,
  FlagOutlined,
  LogoutOutlined,
  UserSwitchOutlined,
} from "@ant-design/icons";
import { useState } from "react";
import { useRouter, usePathname } from "next/navigation";
import styles from "@/components/Font.module.css";

const { Header, Sider, Content } = Layout;

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [collapsed, setCollapsed] = useState(false);
  const router = useRouter();
  const pathname = usePathname();

  const selectedKey = pathname.split("/")[2] || "users"; // e.g. /administrators/users

  const handleMenuClick = ({ key }: { key: string }) => {
    if (key === "logout") {
      handleLogout();
      return;
    }
    if (key === "switchToUser") {
      handleSwitchToUser();
      return;
    }
    router.push(`/administrators/${key}`);
  };

  const handleLogout = () => {
    localStorage.removeItem("user");
    router.push("/");
  };

  const handleSwitchToUser = () => {
    router.push("/homepage/home");
  };

  return (
    <Layout style={{ minHeight: "100vh", overflow: "hidden" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={setCollapsed}
        style={{
          background: "#F4EDEB",
          position: "fixed",
          left: 0,
          top: 0,
          bottom: 0,
          zIndex: 1,
        }}
      >
        <div 
          className={styles.title} 
          style={{ 
            height: 32, 
            margin: 16, 
            fontSize: 18, 
            color: "#7A6E6E",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            whiteSpace: 'pre-wrap',
          }}
        >
          管理后台
        </div>
        <Menu
          mode="inline"
          selectedKeys={[selectedKey]}
          onClick={handleMenuClick}
          style={{
            background: "transparent",
            borderRight: "none"
          }}
          itemStyle={{
            marginBottom: 8,
            borderRadius: 8,
            transition: 'all 0.3s',
          }}
          selectedItemStyle={{
            backgroundColor: "#D6A7A1",
            borderRadius: 8,
            color: "white",
            borderRight: "none",
            boxShadow: "0 2px 8px rgba(214, 167, 161, 0.4)"
          }}
          subMenuStyle={{
            backgroundColor: "transparent",
          }}
          items={[
            { key: "users", icon: <UserOutlined />, label: "用户管理" },
            { key: "posts", icon: <FileTextOutlined />, label: "审核帖子" },
            { key: "pin", icon: <FileTextOutlined />, label: "帖子置顶管理" },
            { key: "reports", icon: <FlagOutlined />, label: "处理举报" },
            {
              key: "categories",
              icon: <AppstoreOutlined />, label: "分区管理",
            },
            {
              key: "tags",
              icon: <AppstoreOutlined />, label: "标签管理",
            },
            {
              key: "alerts",
              icon: <AppstoreOutlined />, label: "消息提醒",
            },
            {
              key: "switchToUser",
              icon: <UserSwitchOutlined />, label: "切换成为用户",
            },
            { key: "logout", icon: <LogoutOutlined />, label: "退出" },
          ]}
        />
      </Sider>
      <Layout style={{ marginLeft: collapsed ? 80 : 200 }}>
        <Content
          style={{
            margin: 0,
            padding: 24,
            background: "#F4EDEB",
            height: "100vh",
            overflow: "hidden", // 禁止内容区域滚动
          }}
        >
          {/* 直接渲染子组件，不使用任何滚动容器 */}
          {children}
        </Content>
      </Layout>
    </Layout>
  );
}